<script setup lang="ts">
import {computed} from "vue"
import {ElIcon} from "element-plus"
import {DArrowRight,DArrowLeft} from "@element-plus/icons-vue";
import slideList from "@/components/slide-list/index.vue"
import homeContent from "@/components/home-content/index.vue"
import { useRootData,useCurrentData } from "@/store/processFlow";

const currentData = useCurrentData();
const isCollapse = computed(() => currentData.slideCollapse)
const rootData = useRootData();
//
rootData.init();
//

const handleToggle = () => {
  currentData.resetSlideCollapse(!currentData.slideCollapse)
}

if(currentData.activeItem && currentData.activeItem.id){
  currentData.refreshActiveNode();
  currentData.initChartData();
}
</script>

<template>
  <div class="nifi-home" w-100vw h-100vh overflow-hidden relative flex>
    <div class="_slide" h-full relative box-border p-l-12 p-y-21 :class="[isCollapse ? 'w-64' : 'w-224']">
      <div w-full h-31 lh-31 c="#1D3C2B" text-24  box-border truncate  :class="['f-ysbth',isCollapse ? 'text-center pr-12' : 'pl-12 pr-24']">
        {{ isCollapse ? '数' : '数字主线'}}
      </div>
      <div class="_slide-list" mt-24>
        <slide-list ></slide-list>
      </div>
      <i class="_switch" absolute w-16 h-48 rd-8 right--8 top-72 z-99 flex items-center justify-center @click="handleToggle">
        <el-icon text-10 c="#1D3C2B">
          <d-arrow-left v-show="!isCollapse"></d-arrow-left>
          <d-arrow-right v-show="isCollapse"></d-arrow-right>
        </el-icon>
      </i>
    </div>
    <div relative flex-1>
      <home-content></home-content>
    </div>
    <div v-show="false" class="w-0 h-0 important-w-100% important-h-100% relative overflow-auto relative block p-0 m-0 w-100% h-100% absolute transition-opacity-1000 left-0 bottom-0 right-0 top-0 w-10 z-9999 h-10 absolute bottom-0 h-5 transition-height-500 hover-h-10 rd-10 bg-#000 op-30 hover-op-70 box-shadow w-10 w-5 hover-w-10"></div>
  </div>
</template>

<style lang="scss">
  .nifi-home {
    ._slide{
      box-shadow: inset -1px 0px 0px 0px #E1E7E4;
      transition:all .5s;
    }
    ._switch{
      background:#fff;
      box-shadow: 0px 8px 16px 0px rgba(29,60,43,0.15);
    }
    ._slide-list{
      height:calc(100% - 31px - 24px);
    }
  }
</style>